<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul li {
        float: left;
        padding-left: 30px;
        padding-right: 30px;
        list-style: none;
        margin-top: 5px;
        cursor: pointer;
    }
    #w1 li{
        display: none;
    }
</style>
<body>
    <ul id="q1">
        <li>图1</li>
        <li>图2</li>
        <li>图3</li>
        <li>图4</li>
        <li>图5</li>
        <li>图6</li>
        <li>图7</li>
        <li>图8</li>
        <li>图9</li>
        <li>图10</li>
    </ul>
<br><br><br><br>
    <ul id="w1">
        <li><img src="./imgs/1.jpg" alt=""></li>
        <li><img src="./imgs/2.jpg" alt=""></li>
        <li><img src="./imgs/3.jpg" alt=""></li>
        <li><img src="./imgs/4.jpg" alt=""></li>
        <li><img src="./imgs/5.jpg" alt=""></li>
        <li><img src="./imgs/6.jpg" alt=""></li>
        <li><img src="./imgs/7.jpg" alt=""></li>
        <li><img src="./imgs/8.jpg" alt=""></li>
        <li><img src="./imgs/9.jpg" alt=""></li>
        <li><img src="./imgs/10.jpg" alt=""></li>
    </ul>
</body>
<script>

    var a = document.querySelectorAll('#q1 li')
    var b = document.querySelectorAll('#w1 li')
    for (let i = 0; i <= a.length-1; i++) {
        a[i].onmouseover = function () {
             for (let j = 0; j < b.length; j++) {
                b[i].style.display = 'block'
            }
        }
        a[i].onmouseout = function () {
             b[i].style.display = 'none'
        }
    }




</script>
</html>